What is the goal of this PR and why is this important?

• The fuchsia left border on affiliation rows was static (only updated on save/reload). Now it updates dynamically as the user types in the title field.
• Profile buttons (person/org) inside affiliation rows didn't reflect inactive state visually. Now they gray out when the row becomes inactive (end_date in past).
• Narrowed the title field and renamed "Primary" label to "Primary contact" for clarity.
• Added CLAUDE.md conventions for Stimulus development: use targets/data attributes instead of DOM queries, and use shorthand action descriptors (omit default events).

How did you approach the change?

• Extended inactive_toggle_controller.js with Stimulus targets (endDate, title, row, button) and an updateBorder() action
• Uses explicit class lists (sky/emerald) instead of regex to swap themed button classes to gray on inactive
• Original button classes are saved on connect() and restored when the row returns to active
• Uses Stimulus shorthand action descriptors — controller#action instead of input->controller#action on textarea elements
• Wired title input via data-inactive-toggle-target="title" and shorthand actions in both person and org affiliation field partials

UI Testing Checklist

• On person edit form, type "Facilitator" in an affiliation title — fuchsia bar appears
• Clear "Facilitator" from title — bar goes gray
• Set end_date to past — row grays out including the org/person button
• Clear end_date — row and button return to normal colors
• "Primary contact" label displays on affiliation rows
• Title field is narrower than before

Anything else to add?

• Also documents Stimulus conventions in CLAUDE.md: use targets over querySelector, use shorthand action descriptors

🤖 Generated with Claude Code